<template>
    <div>
        <div class="case-desc">
            <p>南丁格尔图又称玫瑰图，通常用弧度相同但半径不同的扇形表示各个类目。</p>
            <p>ECharts 可以通过将饼图的 series.roseType 值设为 'area' 实现南丁格尔图，其他配置项和饼图是相同的。</p>
        </div>
        <div class="case-code-container">
            <div id="pie-case-5" class="chart-container">

            </div>
            <highlightjs class="code" lang="js" :code="code"></highlightjs>
        </div>
    </div>
</template>

<script setup>
    import { code } from './code/case5.js';
    import * as echarts from 'echarts';
    import { onMounted } from 'vue';
    onMounted(() => {
        // 基于准备好的dom，初始化echarts实例
        const dom = document.getElementById('pie-case-5');
        const myChart = echarts.init(dom, 'dark', { renderer: 'svg' });

        // 绘制图表
        /** @type {echarts.EChartsOption} */
        const option = {
            title: { text: '南丁格尔图（玫瑰图）' },
            tooltip: {},
            series: [
                {
                    name: '进入来源',
                    type: 'pie',
                    roseType: 'area', // ★★★ 实现南丁格尔图
                    data: [
                        {
                            value: 335,
                            name: '直接访问',
                        },
                        {
                            value: 234,
                            name: '联盟广告',
                        },
                        {
                            value: 1548,
                            name: '搜索引擎',
                        },
                    ],
                },
            ],
        };
        myChart.setOption(option);
    });
</script>

<style lang="scss" scoped>

</style>
